<template>
    <div class="bubble-spark-container">
        <button class="bubble-spark-bt" @click="spark">SPARK</button>
        <i class="bubble-spark" v-for="i in sparkNum"
            :style="{ '--x': randomX(), '--y': randomY(), '--s': randomSize(), '--t': interval / 1000 + 's' }"></i>
    </div>
</template>

<script>

export default {
    name: "BubbleSparkButton",
    data() {
        return {
            sparkNum: 50,
            lastClickTime: 0,
            interval: 2000,
        }
    },
    methods: {
        randomX() {
            return (Math.random() - 0.5) * window.innerWidth + "px";
        },
        randomY() {
            return (Math.random() - 0.5) * window.innerHeight + "px";
        },
        randomSize() {
            return Math.random() * 8 + 2 + "px";
        },
        spark() {
            const current = Date.now();
            if (current - this.lastClickTime < this.interval + 100) {
                return;
            }
            this.lastClickTime = current;
            const sparks = this.$el.querySelectorAll(".bubble-spark");
            sparks.forEach(spark => {
                spark.style.animationPlayState = "running";

                setTimeout(() => spark.style.animationPlayState = "paused", this.interval);
            });

        },
    },
}
</script>

<style scoped>
.bubble-spark-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.bubble-spark-bt {
    position: relative;
    padding: 10px 20px;
    color: #fff;
    background-color: #0a87ff;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    outline: none;
    border: none;
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));
}

.bubble-spark {
    position: absolute;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    pointer-events: none;
    background-color: #0a87ff;
    animation: spark var(--t) ease-out infinite forwards;
    animation-play-state: paused;
    opacity: 0;
}

.bubble-spark:nth-child(even) {
    background-color: transparent;
    border: 1px solid #fff;
}

@keyframes spark {
    0% ,10%{
        opacity: 0;
        transform: translate(0, 0);
    }
    11% {
        opacity: 1;
        transform: translate(0, 0);
    }

    90%,100% {
        opacity: 0;
        transform: translate(var(--x), var(--y));
    }
}
</style>
